<%= form_for(@nueva_reserva, :url=> reservations_path, :method=>'post') do |f| %>

<h2>Reserva de boleto</h2>
<table>
<tr><td><b>Codigo:</b></td><td><%= text_field_tag "", @viaje.codigo, :class => "MiTextField1", :readonly => true %></td></tr>
<tr><td><b>Salida:</b></td><td><%= text_field_tag "", @viaje.station_salida.ciudad, :class => "MiTextField1", :readonly => true %></td></tr>
<tr><td><b>Llegada:</b></td><td><%= text_field_tag "", @viaje.station_llegada.ciudad, :class => "MiTextField1", :readonly => true %></td></tr>
<tr><td><b>Fecha/Hora:</b></td><td><%= text_field_tag "", @viaje.fechaHoraViaje.in_time_zone("Lima").to_formatted_s(:short), :class => "MiTextField1", :readonly => true %></td></tr>
</table>

<div id="tabs" style="background-color: #1A75FF; border: 0px;">
	<ul>
		<li><a href="#tabs-1" style="color: #000066">Asientos disponibles</a></li>
		<li><a href="#tabs-2" style="color: #000066">Información del pasajero</a></li>
	</ul>
	<div id="tabs-1" style="background-color: white">
		<%= field_set_tag "Eleccion del asiento", :class=>"MiFieldSet2" do%>
			<p>Seleccione los asientos que desee reservar</p>
			<table id="MiTabla2">
				<% for i in 1..@asientos.size %>
					<% if (i.modulo 4) == 1 %>
						<tr>
					<% end %>
					<% if @asientos[i] == 0 %>
						<% i_str = (i < 10 ? "0#{i.to_s}" : "#{i.to_s}") %>
						<td>
						<%= label_tag i_str %>
						<%= check_box_tag "asiento[#{i}]", "disponible", false %>
						</td>
					<% else %>
						<% i_str = i < 10 ? "0#{i.to_s}" : "#{i.to_s}" %>
						<td>
						<%= label_tag i_str %>
						<%= check_box_tag "asiento[#{i}]", "no disponible", true, :disabled => true %>
						</td>
					<% end %>
					<% if (i.modulo 4) == 0 %>
						</tr>
					<% end %>
				<% end %>
			</table>
		<% end %>
	</div>
	<div id="tabs-2" style="background-color: white">		
		<%= field_set_tag "Información del pasajero", :class => "MiFieldSet2" do%>
		<p>Ingrese el tipo y el número de documento del pasajero si ha hecho reservas o adquirido boletos anteriormente. De lo contrario, complete el formulario.</p>
		<div style="margin-top: 10px">
		<table>
			<tr>
			<td><%= label_tag 'Nombre' %></td>
			<td><%= text_field_tag 'nombre' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Apellido paterno' %></td>
			<td><%= text_field_tag 'ape_paterno' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Apellido materno' %></td>
			<td><%= text_field_tag 'ape_materno' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Sexo' %></td>
			<td><%= label_tag 'sexoM', 'M' %>
					<%= radio_button_tag 'sexo', 'Masculino'%>
					<%= label_tag 'sexoF', 'F' %>
					<%= radio_button_tag 'sexo', 'Femenino'%></td>
			</tr>
			<tr>
			<td><%= label_tag 'Fecha de nacimiento' %></td>
			<td><%= text_field_tag 'fecha_nacimiento' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Nacionalidad' %></td>
			<td><%= text_field_tag 'nacionalidad' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Tipo documento' %></td>
			<td><%= select_tag 'tipo_documento', options_from_collection_for_select(@tipdocs, :id, :nombre), :class => "MiComboBox1" %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Nro. documento' %></td>
			<td><%= text_field_tag 'num_documento' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Dirección' %></td>
			<td><%= text_field_tag 'direccion' %></td>
			</tr>
			<tr>
			<td><%= label_tag 'Teléfono' %></td>
			<td><%= text_field_tag 'telefono' %></td>
			</tr>
		</table>
		<%= f.submit "Reservar", :class => "MiBoton1", :style => "margin-right: 5px; margin-bottom: 5px; padding-left: 0px;" %>
		<% end %>
	</div>
</div>

<%= hidden_field_tag 'viaje_id', @viaje.id %>

<% end %>

<script type="text/javascript">
$(function() {
	var $tabs = $('#tabs').tabs();	
	
	//si no quiere boton next y prev eliminar ese bloque
	$(".ui-tabs-panel").each(function(i){	
	  var totalSize = $(".ui-tabs-panel").size() - 1;	
	  if (i != totalSize) {
	      next = i + 2;
   		  $(this).append("<a href='#' class='next-tab mover' style='background-color: #000066' rel='" + next + "'>Siguiente &#187;</a>");
	  }	  
	  if (i != 0) {
	      prev = i;
   		  $(this).append("<a href='#' class='prev-tab mover' style='background-color: #000066' rel='" + prev + "'>&#171; Anterior</a>");
	  }   		
	});
	$('.next-tab, .prev-tab').click(function() { 
		       $tabs.tabs('select', $(this).attr("rel"));
		       return false;
		   });  
		//hasta aqui se tiene que eliminar
	});
</script>
